<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>比赛列表</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
<body>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">比赛名称</label>
    <div class="layui-input-block">
      <select name="mname" id="zero" lay-verify="required" lay-filter="mPlayer">
        <option value=""></option>
      </select>
    </div>
<!--    <label class="layui-form-label">比赛场次</label>-->
<!--    <div class="layui-input-block">-->
<!--      <input type="text" name="roundNum" required lay-verify="required" placeholder="请输入场次" autocomplete="off"-->
<!--             class="layui-input">-->
<!--    </div>-->
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<table id="demo" lay-filter="test"></table>
<script src="/static/layui/layui.js"></script>
<script th:src="@{../static/js/eleDel.js}" type="text/javascript"></script>
<script th:src="@{../static/mysource/js/jquery-3.3.1.min.js}"></script>
<script type="text/html" id="btn">
  <!--按钮-->
  <!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>-->
  <button class="layui-btn layui-btn-xs" lay-event="edit">查看大屏</button>
</script>

<script type="text/javascript">

  layui.use(['table' ,'layer'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;

    var gid = null;
    $.ajax({
      url: '/game/gameInfo',
      dataType: 'json',
      type: 'get',
      success: function (data) {
        console.log(data);//下面会提到这个data是什么值
        //使用循环遍历，给下拉列表赋值
        $.each(data.data, function (index, value) {
          // console.log(value.department_id);
          $('#zero').append(new Option(value.mname,value.match_id));// 下拉菜单里添加元素
        });
        layui.form.render("select");//重新渲染 固定写法

      }
    })
    form.on('select(mPlayer)', function (data) {        //对应lay-filter

      gid = data.value;//获取value值
    });

    //第一个实例
    table.render({
      elem: '#demo'
      // , height: 500
      , skin: 'line' //表格风格
      , url: '/score/listAll' //数据接口
      , page: true //开启分页
      , even: true
      // , id: 'table'
      , toolbar: '#toolbarDemo'//开启自定义工具行，指向自定义工具栏模板选择器
      , defaultToolbar: ['filter', 'print', 'exports']
      , cols: [
        [ //表头
          {field: 'mid', title: '比赛ID', align: 'center', width: 80}
          , {field: 'mname', title: '大赛名称', align: 'center'}
          , {field: 'matchname', title: '场次别名', align: 'center'}
          , {field: 'a_name', title: '选手1', align: 'center'}
          , {field: 'a_song', title: '选手1歌曲', align: 'center'}
          , {field: 'b_name', title: '选手2', align: 'center'}
          , {field: 'b_song', title: '选手2歌曲', align: 'center'}
          , {field: 'm_status', title: '比赛状态', align: 'center'}
          , {field: 'button', title: '操作', width: 200, toolbar: "#btn", align: 'center'}
        ]
      ]
      , limits: [3, 5, 10, 20]
      , limit: 10
      , parseData: function (res) {
        var result;
        // console.log(this);
        // console.log(JSON.stringify(res));
        if (this.page.curr) {
          result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
        } else {
          result = res.data.slice(0, this.limit);
        }
        return {"code": res.code, "msg": res.msg, "count": res.count, "data": result};
      }
      , done: function (res) {
        $("[data-field='m_status']").children().each(function () {
          if ($(this).text() == '1') {
            $(this).text("进行中")
          } else if ($(this).text() == '0') {
            $(this).text("未开始")
          } else if ($(this).text() == '2') {
            $(this).text("已结束")
          }
        })
      }
    });
    form.on('submit(formDemo)', function (data) {
      console.log(data)
      // var  roundNum = $("[name='roundNum']").val();
      table.render({
        elem: '#demo'
        // , height: 500
        , skin: 'line' //表格风格
        , url: '/score/list?gid='+gid//数据接口
        , page: true //开启分页
        , even: true
        // , id: 'table'
        , toolbar: '#toolbarDemo'//开启自定义工具行，指向自定义工具栏模板选择器
        , defaultToolbar: ['filter', 'print', 'exports']
        , cols: [
          [ //表头
            {field: 'mid', title: '比赛ID', align: 'center', width: 80}
            , {field: 'mname', title: '大赛名称', align: 'center'}
            , {field: 'matchname', title: '场次别名', align: 'center'}
            , {field: 'a_name', title: '选手1', align: 'center'}
            , {field: 'a_song', title: '选手1歌曲', align: 'center'}
            , {field: 'b_name', title: '选手2', align: 'center'}
            , {field: 'b_song', title: '选手2歌曲', align: 'center'}
            , {field: 'm_status', title: '比赛状态', align: 'center'}
            , {field: 'button', title: '操作', width: 200, toolbar: "#btn", align: 'center'}
          ]
        ]
        , limits: [3, 5, 10, 20]
        , limit: 10
        , parseData: function (res) {
          var result;
          // console.log(this);
          // console.log(JSON.stringify(res));
          if (this.page.curr) {
            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
          } else {
            result = res.data.slice(0, this.limit);
          }
          return {"code": res.code, "msg": res.msg, "count": res.count, "data": result};
        }
        , done: function (res) {
          $("[data-field='m_status']").children().each(function () {
            if ($(this).text() == '1') {
              $(this).text("进行中")
            } else if ($(this).text() == '0') {
              $(this).text("未开始")
            } else if ($(this).text() == '2') {
              $(this).text("已结束")
            }
          })
        }
      });

      return false;
    });


      //触发事件
    table.on('tool(test)', function (obj) {
      var data1 = obj.data; //获得当前行数据
      // console.log(data1)
      switch (obj.event) {
        case 'del':
          layer.msg('删除', {icon: 6, anim: 6});
          table.render()
          // layui.form.render("select");//重新渲染 固定写法
          break;
        case 'edit':
          // layer.msg('编辑', {icon: 6, anim: 6});
          bb(data1)
          break;
      }
      ;
    });

    function bb(data1){

      let mid = data1.mid;
      window.location.href = "/show/doShow/"+mid;


    }



  })
</script>

  </body>
</html>